<template>
    <main-wrap :bodyStyle="{height:'100%',overflow: 'hidden'}">
        <div class="selfMain">
            <div class="addressBox">
                <slot/>
            </div>
            <div class="goodsInfo">
                <div class="scroll-box">
                    <h5 class="bigtitle" v-t="'goods.text16'">Commodity Order</h5>
                    <div class="goodsIntro">
                        <div class="imgBox">
                            <cut-image :url='detail.imageUrl'/>
                        </div>
                        <div class="txtcon">
                            <h4>{{detail.title}}</h4>
                            <div class="props">
                                <span>{{orderInfo.specs.specGroupName}} | {{orderInfo.specs.specName}}</span>
                                <span>{{text17}} * {{orderInfo.quantity}}</span>
                            </div>
                            <div class="price" v-if="detail.internalEthPrice">
                                <img src="/images/priceIcon.png" alt=""/>
                                {{detail.internalEthPrice.standardString}}
                                <span v-if="detail.internalPrice">(${{detail.internalPrice.decimalTwoString}})</span>
                            </div>
                        </div>
                    </div>
                    <div class="buyInfo">
                        <div class="buyInfoItem">
                            <label v-t="'goods.text17'">Quantity</label>
                            <div class="valtxt valtxt2">
                                <stepper v-model="orderInfo.quantity" :min='1' :readonly="true"/>
                            </div>
                        </div>
                        <div class="buyInfoItem">
                            <label v-t="'goods.text18'">Delivery</label>
                            <div class="valtxt" v-if="detail.apiShopDetailDto">
                                <p v-if="orderInfo.logisticsType==2">Self Delivery, Working Hours {{detail.apiShopDetailDto.selfDeliveryStartTime}}-{{detail.apiShopDetailDto.selfDeliveryEndTime}}</p>
                                <p v-else><!---物流配送-->
                                    <template v-if="detail.apiShopDetailDto.deliveryDeliveryTime==1"><!---工作时间-->
                                        Express Transportation  Delivery On Business Days Only
                                    </template>
                                    <template v-if="detail.apiShopDetailDto.deliveryDeliveryTime==2"><!---工作日+节假日（含双休日）-->
                                        Express Transportation
                                    </template>
                                </p>
                            </div>
                        </div>
                        <div class="buyInfoItem">
                            <label v-t="'goods.text19'">CommodityAmount</label>
                            <div class="valtxt">
                                <em><img src="/images/priceIcon.png" alt=""/> {{((detail.internalEthPrice?detail.internalEthPrice.num:0) * orderInfo.quantity).toFixed(2)}}</em>
                            </div>
                        </div>
                        <div class="buyInfoItem">
                            <label v-t="'goods.text20'">freight</label>
                            <div class="valtxt">
                                <em v-if="freightPrice && freightPrice>0">
                                    <img src="/images/priceIcon.png" alt=""/> 
                                    {{freightPrice}}
                                </em>
                                <em v-else>Free</em>
                            </div>
                        </div>
                         <spec-params  :amount2='totalPrice2' :showType="false" @changeCoupon="changeCoupon" />
                    </div>
                </div>
                <buy-order-btn :type="2" :couponId="couponId"  :amount1='totalPrice1' :amount2='totalPrice2'/>
            </div>
        </div>
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import {useRoute,useRouter} from 'vue-router'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import mySearch from '@/components/mySearch.vue'
import cutImage from '@/components/cutImage.vue'
import myButton from '@/components/myButton.vue';
import stepper from '@/components/stepper.vue'
import buyOrderBtn from '@/components/buyOrderBtn.vue'
import specParams from '../../goods/detail/components/specParams.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
        mainWrap,
        mySearch,
        cutImage,
        myButton,
        stepper,
        buyOrderBtn,
        specParams
    },
    setup(){
        const store = useStore()
        const router = useRouter()
        const route = useRoute()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            detail:computed(()=>store.state.shop.detail),
            orderInfo:computed(()=>store.state.shop.orderInfo),
            totalPrice1:0,
            totalPrice2:0,
            couponId:null,
            freightPrice:computed(()=>store.state.shop.freightPrice), // 物流费用
            text17:t('goods.text17')
        })
        state.totalPrice1 = computed(()=>{
            if(!state.detail.goodsId) return
            const price = state.detail.internalEthPrice?state.detail.internalEthPrice.num:0
            let total = price * state.orderInfo.quantity + state.freightPrice // 单价*数量+运费
            return total>0?total:0
        })
        state.totalPrice2 = computed(()=>{
            if(!state.detail.goodsId) return
            let total = state.detail.internalPrice.num * state.orderInfo.quantity + state.freightPrice // 单价*数量+运费
            return total>0?total:0
        })

        onMounted(()=>{
           //!state.detail.goodsId && router.back()
           store.dispatch('shop/get_freight_price')  // 获取物流费用
        })
         const changeCoupon = (item)=>{
          state.couponId = item.shopCouponId
        }

        return {
            ...toRefs(state),
            changeCoupon
        }
    }
}
</script>

<style lang="scss" scoped>
   .selfMain{
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-x: auto;
    box-sizing: border-box;
    padding: 30px 30px 30px 0;
    .addressBox{
        width: 550px;
        height: 100%;
        background: url(/images/self/self1.png) left top no-repeat;
        background-size: 100% 100%;
        flex-shrink: 0;
        padding: 30px;
    }
    .goodsInfo{
        display: flex;
        flex-flow: column;
        flex: 1;
        min-width: 900px;
        background: url(/images/self/self2.png) left top no-repeat;
        background-size: 100% 100%;
        margin: 0 0 0 30px;
        padding: 30px 0 0 30px;
        .scroll-box{
            flex: 1;
            height: 100%;
            width: 100%;
            overflow: hidden;
            overflow-y: auto;
            padding-right: 30px;
        }
        
        .goodsIntro{
            display: flex;
            padding: 20px 0 0 0;
            font-size: 22px;
            font-family: Inter-Medium, Inter;
            font-weight: 500;
            line-height: normal;
            color: #FFFFFF;
            .imgBox{
                width: 165px;
                height: 165px;
            }
            .txtcon{
                flex: 1;
                padding: 0 0 0 30px;
                h4{
                    font-size: 28px;
                    font-weight: 500;
                    font-family: Poppins-Medium, Poppins;
                    line-height: normal;
                    color: #fff;
                }
                .props{
                    display: flex;
                    padding: 14px 0;
                    span{
                        background: rgba(103,248,255,0.2000);
                        padding: 0 20px;
                        color: #ECFFFF;
                        font-size: 24px;
                        line-height: normal;
                        height: 50px;
                        line-height: 50px;
                        &+span{
                            margin: 0 0 0 15px;
                        }
                    }
                }
                .price{
                    font-size: 30px;
                    color: #C9FFFF;
                    line-height: normal;
                    span{
                        color: #fff;
                    }
                    img{
                        display: block;
                        float: left;
                        width: 22px;
                        margin: 3px 15px 0 0;
                    }
                }
            }
        }
    }
    .buyInfo{
        border-top:1px dashed rgba(59, 81, 147,1);
        margin: 20px 0 0 0;
        padding: 20px 0 0 0;
        font-size: 22px;
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        line-height: normal;
        color: #FFFFFF;
        .buyInfoItem{
            display: flex;
            height: 75px;
            background: rgba(103,248,255,0.2000);
            align-items:center;
            padding: 0 20px 0 30px;
            &+.buyInfoItem{
                margin-top: 15px;
            }
            label{
                flex: 1;
                font-size: 28px;
                color: #ABD5FF;
                font-weight: 500;
            }
            .valtxt{
                text-align: right;
                font-size: 28px;
                max-width: 400px;
                &.valtxt2{
                    width: 280px;
                }
                p{
                    color: #fff;
                    line-height: 30px;
                }
                em{
                    display: flex;
                    font-family: Inter-Medium, Inter;
                    font-weight: 600;
                    font-style: normal;
                    color: #CBFAFF;
                    align-items: center;
                    img{
                        display: block;
                        width: 22px;
                        margin: 0 10px 0 0;
                    }
                }
            }
        }
    }
    .bigtitle{
        line-height: normal;
        font-size: 28px;
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        color: #FFFFFF;
        line-height: normal;
        text-shadow: 0px 0px 4px #07A3FB;
        //-webkit-background-clip: text;
        //-webkit-text-fill-color: transparent;
    }
   } 
  
</style>